<!DOCTYPE html>
<html lang="ZH-CN">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <!-- 兼容  要求当前网页使用IE浏览器最高版本的内核来渲染 -->
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <!-- 解决ie9以下浏览器对html5新增标签的不识别 并导致css不起作用的问题 -->
    <!--[if lt IE 9]>
      <script src="https://cdn.jsdelivr.net/npm/html5shiv@3.7.3/dist/html5shiv.min.js"></script>
      <script src="https://cdn.jsdelivr.net/npm/respond.js@1.4.2/dest/respond.min.js"></script>
    <![endif]-->
    <!-- Bootstrap -->
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css"
      rel="stylesheet"
    />
    <link rel="stylesheet" href="css/swiper.min.css" />
    <link rel="stylesheet" href="css/product.css" />
    <script src="js/flexible.js"></script>

    <title>产品中心</title>
  </head>
  <body>
    <section>
      <!-- header -->
      <div class="t">
        <div class="container">
          <div class="row header">
            <div class="col-lg-2 col-md-2 col-sm-2">
              <div class="logo">
                <a href="index.html"><img src="images/logo.png" alt="" /></a>
              </div>
            </div>
            <ul class="col-lg-7 col-sm-10 nav-top col-sm-10 hidden-xs">
              <li class="hidden-xs hidden-lg hidden-md col-sm-2"></li>
              <li><a href="index.html">首页</a></li>
              <li><a href="list.html">关于VCARE</a></li>
              <li><a href="product.html">产品中心</a></li>
              <li><a href="news.html">新闻中心</a></li>
              <li><a href="service.html">服务支持</a></li>
              <li><a href="contact.html">联系我们</a></li>
            </ul>
            <button
              class="btn glyphicon glyphicon-align-justify hidden-lg hidden-md hidden-sm"
            ></button>
            <div class="col-lg-3 ipt hidden-xs hidden-sm hidden-md">
              <input type="text" value=" 搜索" />
              <button class="glyphicon glyphicon-search"></button>
            </div>
            <span><a href="#">CN </a>/<a href="#"> EN</a></span>
          </div>
        </div>
      </div>
      <div class="disN hidden-md hidden-lg">
        <ul class="ul_li">
          <li><a href="index.html">首页</a></li>
          <li><a href="list.html">关于VCARE</a></li>
          <li><a href="product.html">产品中心</a></li>
          <li><a href="news.html">新闻中心</a></li>
          <li><a href="service.html">服务支持</a></li>
          <li><a href="contact.html">联系我们</a></li>
        </ul>
      </div>
      <!-- banner -->
      <div class="row col-lg-12 col-md-12 col-sm-12 col-xs-12 banner clearfix">
        <img src="upload/puduct_banner.jpg" alt="" />
      </div>
      <!-- nav  -->
      <div class="container">
        <div class="row nav-pr">
          <div class="col-lg-3 col-md-3 col-sm-3 col-xs-12">
            <div class="column">
              <div>
                <h2>产品中心</h2>
                <span>PRODUCT CENTER</span>
              </div>
              <ul>
                <li><a href="#">智能手机</a></li>
                <li><a href="#">功能手机</a></li>
                <li><a href="#">老人机</a></li>
                <li><a href="#">女性手机</a></li>
                <li><a href="#">车载导航</a></li>
                <li><a href="#">智能手环</a></li>
                <li><a href="#">其他产品</a></li>
              </ul>
            </div>
            <div class="contact-us">
              <div>
                <h2>联系我们</h2>
                <span>CONTACT US</span>
              </div>
              <ul>
                <li><a href="#">联系人：花花</a></li>
                <li><a href="#">手机：12345678914</a></li>
                <li><a href="#">电话：0755-55566677</a></li>
                <li><a href="#">邮箱：2255648@qq.com</a></li>
                <li>
                  <a href="#"
                    >地址：广东省深圳市宝安区西乡街道宝源路名优采购中心B做三区512室</a
                  >
                </li>
              </ul>
            </div>
            <!-- Swiper -->
            <div class="swiper-container">
              <div class="swiper-wrapper">
                <div class="swiper-slide">
                  <img src="upload/about02.jpg" alt="" />
                </div>
                <div class="swiper-slide">
                  <img src="upload/about02.jpg" alt="" />
                </div>
                <div class="swiper-slide">
                  <img src="upload/about03.jpg" alt="" />
                </div>
              </div>
              <!-- Add Pagination -->
              <div class="swiper-pagination d-d"></div>
            </div>
          </div>
          <div class="col-lg-9 col-md-9 col-sm-9 col-xs-12 sho-ji">
            <div class="classify">
              <span>全部分类：</span>
              <span><a href="#">全部</a></span>
              <span><a href="#">a系列</a></span>
              <span><a href="#">b系列</a></span>
              <span><a href="#">c系列</a></span>
            </div>
            <div class="classify">
              <span>网络制式：</span>
              <span><a href="#">全部</a></span>
              <span><a href="#">联通4G</a></span>
              <span><a href="#">移动4G</a></span>
              <span><a href="#">全网通</a></span>
            </div>
            <div class="classify">
              <span>屏幕尺寸：</span>
              <span><a href="#">全部</a></span>
              <span><a href="#">7.0英寸</a></span>
              <span><a href="#">6.0英寸</a></span>
              <span><a href="#">5.0英寸</a></span>
            </div>

            <ul class="sj-img">
              <li>
                <a href="#">
                  <img src="upload/duct001.jpg" alt="" />
                  <h4>小钢炮</h4>
                  <span>4000mAh电池，全网通4G VoLTE，3</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="upload/duct001.jpg" alt="" />
                  <h4>小钢炮</h4>
                  <span>4000mAh电池，全网通4G VoLTE，3</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="upload/duct001.jpg" alt="" />
                  <h4>小钢炮</h4>
                  <span>4000mAh电池，全网通4G VoLTE，3</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="upload/duct001.jpg" alt="" />
                  <h4>小钢炮</h4>
                  <span>4000mAh电池，全网通4G VoLTE，3</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="upload/duct001.jpg" alt="" />
                  <h4>小钢炮</h4>
                  <span>4000mAh电池，全网通4G VoLTE，3</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="upload/duct001.jpg" alt="" />
                  <h4>小钢炮</h4>
                  <span>4000mAh电池，全网通4G VoLTE，3</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="upload/duct001.jpg" alt="" />
                  <h4>小钢炮</h4>
                  <span>4000mAh电池，全网通4G VoLTE，3</span>
                </a>
              </li>
              <li>
                <a href="#">
                  <img src="upload/duct001.jpg" alt="" />
                  <h4>小钢炮</h4>
                  <span>4000mAh电池，全网通4G VoLTE，3</span>
                </a>
              </li>
            </ul>
            <div class="fenY">
              <nav aria-label="Page navigation">
                <ul class="pagination">
                  <li>
                    <a href="#" aria-label="Previous">
                      <span aria-hidden="true">&laquo;</span>
                    </a>
                  </li>
                  <li><a href="#">1</a></li>
                  <li><a href="#">2</a></li>
                  <li><a href="#">3</a></li>
                  <li><a href="#">4</a></li>
                  <li><a href="#">5</a></li>
                  <li>
                    <a href="#" aria-label="Next">
                      <span aria-hidden="true">&raquo;</span>
                    </a>
                  </li>
                </ul>
              </nav>
            </div>
          </div>
        </div>
      </div>
      <!-- 底部 -->
      <div class="bottom">版权所有 © 2017-2027 威喀尔国际 粤ICP05138723号</div>
    </section>
    <script src="js/swiper.min.js"></script>
    <script>
      var btn = document.querySelector(".btn");
      var ul1 = document.querySelector(".ul_li");
      var disN = document.querySelector(".disN");
      var flag = 0;
      btn.onclick = function () {
        this.style.backgroundColor = "#343434";
        this.style.color = "#fff";
        if (flag === 0) {
          ul1.className = "xs-ul";
          disN.style.display = "block";
          flag = 1;
        } else if (flag === 1) {
          disN.style.display = "none";
          ul1.className = "ul_li";
          flag = 0;
        }
      };

      btn.onblur = function () {
        this.style.backgroundColor = "#e1e1e1ee";
      };

      window.addEventListener("load", function () {
        window.addEventListener("resize", function () {
          if (window.innerWidth >= 768) {
            ul.className = "col-lg-7 col-sm-10 nav-top col-sm-10 hidden-xs";
          }
        });
      });

      var ipt = document.querySelector("input");
      ipt.onfocus = function () {
        if (this.value === " 搜索") {
          this.value = "";
        }
        this.style.color = "#333";
      };
      ipt.onblur = function () {
        if (this.value === "") {
          this.value = " 搜索";
        }
        this.style.color = "#666";
      };

      //   Initialize Swiper

      var swiper = new Swiper(".swiper-container", {
        spaceBetween: 30,
        centeredSlides: true,
        autoplay: {
          delay: 2500,
          disableOnInteraction: false,
        },
        pagination: {
          el: ".swiper-pagination",
          clickable: true,
        },
      });
    </script>
  </body>
</html>
